<template lang="pug">
  .notice-bar.pos-f(v-if="getNotice", @click="noticeStatus" @touchmove="handleDragPrevent", @mouseover="handleStop", @mouseout="handleReMove")
    .icon(:style="imgStyle")
    .notice-wrap.tac.pos-a
      .notice-bar-content(ref="noticeConten")
        a.notice-text(href='javascript:;', ref="noticeText", :style="textStyle") {{getNotice}}
        a.notice-text(href='javascript:;', ref="noticeText", :style="textStyle") {{getNotice}}
</template>

<script>
import mixin from '@/mixins/theme'
import { handleDefPrevent } from '@/utils'

let timer

export default {
  mixins: [mixin],
  data() {
    return {
      text: '',
      num: 0,
      dom: null,
      noticeIsMove: false,
      textStyle: {
        width: 'auto'
      },
      imgStyle: {
        backgroundImage: `url(${$globalconfig.URLS.API}krpano/images/notice.png)`
      }
    }
  },
  mounted() {
    this.$nextTick(() => {

      setTimeout(() => {
        this.getWidth()
        // 判断路由 解决输入密码页面报错问题
        this.$route.name == 'Home' && this.getNotice && this.move()
      }, 1000)
    })
  },
  computed: {
    getNotice() {
      let text = this.$store.getters.notice
      if (text) {
        const re = /\）$/

        if (re.test(text)) {
          return text + '  '
        }
        return text
      }
    }
  },
  methods: {
    getWidth() {
      if (!this.getNotice) return
      let vw = document.documentElement.clientWidth
      let oP = this.$refs.noticeConten.children
      let aW = oP[0].offsetWidth

      if (aW < vw) {
        aW = vw
      }
      this.textStyle = {
        width: aW + 'px'
      }
      this.$refs.noticeConten.style.width = (aW + 10) * 2 + 'px'
      this.$refs.noticeConten.style.position = 'absolute'
      this.$refs.noticeConten.style.top = '0'
    },
    move() {
      let content = this.$refs.noticeConten
      let textNode = this.$refs.noticeText
      this.noticeIsMove = true
      timer = setInterval(() => {
        if (parseInt(content.style.left) <= -textNode.offsetWidth) {
          content.style.left = 0
          this.num = 0
        }
        this.num += 2
        content.style.left = -this.num + 'px'
      }, 100)
    },
    handleDragPrevent(e) {

      // handleDefPrevent(e)
    },
    handleStop() {
      clearInterval(timer)
    },
    noticeStatus(){
      if(this.noticeIsMove){
        clearInterval(timer)
        this.noticeIsMove = false
      }else{
        this.move()
      }
    },
    handleReMove() {
      this.move()
    }
  },
  destroyed() {
    clearInterval(timer)
    this.noticeIsMove = false
  }
}
</script>

<style lang="stylus">
.notice-bar
  top: 0
  left: 0
  right: 0
  bottom: auto
  font-size: 12px
  background: rgba(0, 0, 0, 0.5)
  z-index: 9

  .icon
    width: 20px
    height: 20px
    background-size: 100% 100%

  .notice-wrap
    top: 0
    left: 20px
    width: 100000px
    height: 100%
    overflow: hidden

  .notice-bar-content
    min-width: 100%
    height: 100%
    line-height: 100%
    font-size: 0
    overflow: hidden

    .notice-text
      float: left
      height: 100%
      width: auto
      font-size: 12px
      white-space:pre
      box-sizing: border-box
      color: white
</style>
